<!DOCTYPE html>
<html>
<head>
    <title>模板</title>
</head>
<!--<link rel="stylesheet" href="${request.contextPath}/statics/css/bootstrap.min.css">
<link rel="stylesheet" href="${request.contextPath}/statics/plugins/layui/css/layui.css">-->
<link rel="stylesheet" href="${request.contextPath}/statics/plugins/adminLTE/css/adminlte.min.css">
<link rel="stylesheet" href="${request.contextPath}/statics/plugins/adminLTE/css/all.min.css">
<link rel="stylesheet" href="${request.contextPath}/statics/plugins/adminLTE/css/OverlayScrollbars.min.css">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link rel="stylesheet" href="../../statics/plugins/layui2.5.6/css/layui.css">
<script src="${request.contextPath}/statics/libs/jquery.min.js"></script>
<script src="${request.contextPath}/statics/plugins/layer/layer.js"></script>
<script src="${request.contextPath}/statics/libs/bootstrap.min.js"></script>
<script src="${request.contextPath}/statics/libs/vue.min.js"></script>
<script src="${request.contextPath}/statics/plugins/jqgrid/grid.locale-cn.js"></script>
<script src="${request.contextPath}/statics/plugins/jqgrid/jquery.jqGrid.min.js"></script>
<script src="${request.contextPath}/statics/plugins/ztree/jquery.ztree.all.min.js"></script>
<script src="${request.contextPath}/statics/js/common.js"></script>
<script src="../../statics/plugins/layui2.5.6/layui.js"></script>
<body>
<section class="content">

    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-3 col-6">
                <div class="small-box bg-info">
                    <div class="inner" style="text-align: center;">
                        <h3>昨日车流量：<span id="yesterday"></span>/车次</h3>
                        <h4 style="display: inline-block;width: 49%;border-right: 1px solid white;">南区：<span id="yesterdays"></span>/车次</h4>
                        <h4 style="display: inline-block;width: 49%;">北区：<span id="yesterdayn"></span>/车次</h4>
                    </div>
                    <div class="icon">
                        <i class="icon ion-android-car" style="font-size: 70px"></i>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-6">
                <div class="small-box bg-success">
                    <div class="inner" style="text-align: center;">
                        <h3>今日车流量：<span id="today"></span>/车次</h3>
                        <h4 style="display: inline-block;width: 49%;border-right: 1px solid white;">南区：<span id="todays"></span>/车次</h4>
                        <h4 style="display: inline-block;width: 49%;">北区：<span id="todayn"></span>/车次</h4>
                    </div>
                    <div class="icon">
                        <i class="icon ion-android-car" style="font-size: 70px"></i>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-6">
                <div class="small-box bg-warning">
                    <div class="inner" style="text-align: center;color: white">
                        <h3>本月车流量：<span id="thismoth"></span>/车次</h3>
                        <h4 style="display: inline-block;width: 49%;border-right: 1px solid white;">南区：<span id="thismoths"></span>/车次</h4>
                        <h4 style="display: inline-block;width: 49%;">北区：<span id="thismothn"></span>/车次</h4>
                    </div>
                    <div class="icon">
                        <i class="icon ion-android-car" style="font-size: 70px"></i>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-6">
                <div class="small-box bg-info">
                    <div class="inner" style="text-align: center;">
                        <h3>平均逗留时长：<span id="stayTime"></span>/分钟</h3>
                        <h4 style="display: inline-block;width: 49%;border-right: 1px solid white;">南区：<span id="stayTimes"></span>/分钟</h4>
                        <h4 style="display: inline-block;width: 49%;">北区：<span id="stayTimen"></span>/分钟</h4>
                    </div>
                    <div class="icon">
                        <i class="icon ion-android-car" style="font-size: 70px"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="row" style="height: 50px;">
            <div class="card-tools">
                <button type="button" class="btn btn-primary" onclick="goquery(7)">近七天</button>
                <button type="button" class="btn btn-primary" onclick="goquery(30)">近三十天</button>
                自定义时间:
                <button type="button" class="btn btn-success" style="padding: 0;border: none;background-color:none ;"><input id="beginTime" type="text"placeholder="开始时间"/></button>
                ——<button type="button" class="btn btn-success" style="padding: 0;border: none;background-color: none;"><input id="endTime" type="text"placeholder="结束时间"/></button>
                <button type="button" class="btn btn-success" onclick="submit()">查询</button>

            </div>
        </div>
        <div class="row" style="height: 400px;margin-top: 5px;">
            <div class="col-md-6" style="height: 100%;">
                <div class="card" style="height: 100%;">
                    <div class="card-header">
                        <h4 class="card-title">车流量统计</h4>
                        <div class="card-tools">
                            <button type="button" class="btn  btn-success" onclick="cllExp()">
                                数据导出
                            </button>
                        </div>
                    </div>
                    <div class="card-body"style="height: 80%;">
                        <div class="row" style="height: 100%;">
                            <div class="col-md-12" style="height: 100%;width: 100%">
                                <div id="cllStatistics" style="height: 90%"></div>

                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <div class="col-md-6" style="height: 100%;">
                <div class="card" style="height: 100%;">
                    <div class="card-header">
                        <h4 class="card-title">车辆归属地统计</h4>
                    </div>
                    <div class="card-body"style="height: 80%;">
                        <div class="row" style="height: 100%;">
                            <div class="col-md-12" style="height: 100%;">
                                <div id="cllOwnership" style="height: 90%"></div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row" style="height: 400px;margin-top: 5px;">
            <div class="col-md-6" style="height: 100%;">
                <div class="card" style="height: 100%;">
                    <div class="card-header">
                        <h4 class="card-title">南区车辆类型对比</h4>
                    </div>
                    <div class="card-body"style="height: 100%;">
                        <div class="row" style="height: 100%;">
                            <div class="col-md-12" style="height: 100%;">
                                <div id="cllCartypesouth" style="float:left;width:97%;height: 90%"></div>

                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <div class="col-md-6" style="height: 100%;">
                <div class="card" style="height: 100%;">
                    <div class="card-header">
                        <h4 class="card-title">北区车辆类型对比</h4>
                    </div>
                    <div class="card-body"style="height: 100%;">
                        <div class="row" style="height: 100%;">
                            <div class="col-md-12" style="height: 100%;">
                                <div id="cllCartypenorth" style="float:left;width:97%;height: 90%"></div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


</section>

</body>
<script>
    layui.use('laydate', function() {
        var laydate = layui.laydate;
        //日期时间选择器
        laydate.render({
            elem: '#beginTime'
            ,type: 'date'
        });
        laydate.render({
            elem: '#endTime'
            ,type: 'date'
        });
    });
</script>
</html>
<script src="../../statics/js/indexs/echarts-all.js"></script>
<script src="${request.contextPath}/statics/js/modules/cll/cllmodel.js?_${.now?long}"></script>
<script src="${request.contextPath}/statics/plugins/adminLTE/js/adminlte.min.js"></script>